<template>
	<div ref="content" id="box">
		<!-- 这里是要抓取内容的div -->
		<div class="type" v-if="mytype==1">
			<img :src="imageUrl" alt="" class="left">
			<div class="right">
				<h1 class="t1">{{ title }}</h1>
				<p class="t2">{{ subtitle }}</p>
			</div>
		</div>
		<div class="type" v-else>
			<img :src="imageUrl" alt="" class="all">
		</div>
	</div>
	
	<van-field v-model="title" placeholder="输入标题" />
	<van-field v-model="subtitle" placeholder="输入副标题" />
	<van-radio-group v-model="mytype" @change="check">
		<van-radio name="1">文字</van-radio>
		<van-radio name="0">全图片</van-radio>
	</van-radio-group>
	<input type="file" @change="handleFileSelect" />
	<img :src="imageUrl" v-if="imageUrl" class="picshow">
	<!-- <van-radio-group v-model="mypic" @change="check2">
		<van-radio :name="item"  v-for="item in pic" :key="item.id">
			<img :src="item.url" style="width: 60px;height: 60px" alt="" srcset="">
		</van-radio>
	</van-radio-group> -->
	<van-button type="info" @click="captureContent">生成</van-button>
	<van-button type="info" @click="downloadImage">下载</van-button>
	<div>
		<!-- <van-uploader :after-read="onRead" accept="image/gif, image/jpeg, image/png, image/bmp" multiple>
			<van-icon name="photograph" />
		</van-uploader> -->
	</div>
	
</template>

<script setup>
import { ref } from 'vue';
import html2canvas from 'html2canvas';
import { canvasToBlob } from 'canvas-to-blob';
import image1 from '../../assets/imgs/f1.jpg';
import image2 from '../../assets/imgs/f2.jpg';
import image3 from '../../assets/imgs/f3.jpg';
import image4 from '../../assets/imgs/f4.jpg';
import image5 from '../../assets/imgs/f5.jpg';
import l1 from '../../assets/imgs/l1.jpg';
import l2 from '../../assets/imgs/l2.jpg';
import l3 from '../../assets/imgs/l3.jpg';
import l4 from '../../assets/imgs/l4.jpg';

const mytype = ref(1)
console.log(`output->type.value`,mytype.value)
const title = ref('李二狗出品');
const subtitle = ref('13988888888');
const content = ref(null);
const imageData = ref(null);
const mypic = ref(1)
const imageUrl = ref();
const pic =ref([
	{
		id:1,
		url:image1
	},
	{
		id:2,
		url:image2
	},
	{
		id:3,
		url:image3
	},
	{
		id:4,
		url:image4
	}
	,
	{
		id:5,
		url:image5
	}
	,
	{
		id:6,
		url:l1
	}
	,
	{
		id:7,
		url:l2
	}
	,
	{
		id:8,
		url:l3
	}
	,
	{
		id:9,
		url:l4
	}
	
])
const  handleFileSelect=(event)=>{
      const file = event.target.files[0];
      imageUrl.value = URL.createObjectURL(file);
    }
const check = () => {
	
	console.log(`output->type.value`,mytype.value)
}
const check2 = () => {
	
	console.log(`output->type.value`,mypic.value)
}
const captureContent = () => {
	const options = {
		width: 296, // 自定义宽度
		height: 128, // 自定义高度
	};

	
	html2canvas(content.value, options).then(canvas => {
		const rotatedCanvas = document.createElement('canvas');
		const rotatedContext = rotatedCanvas.getContext('2d');
		rotatedCanvas.width = canvas.height;
		rotatedCanvas.height = canvas.width;
		rotatedContext.translate(canvas.height, 0);
		rotatedContext.rotate(Math.PI / 2);
		rotatedContext.drawImage(canvas, 0, 0);

		const imgData = rotatedCanvas.toDataURL('image/png');
		
		const img = new Image();
		img.src = imgData;

		// 可以将生成的旋转后的图片插入到页面中或进行其他操作
		document.body.appendChild(img);
		imageData.value = rotatedCanvas.toDataURL('image/bmp');
	});
};
const downloadImage = () => {
	const a = document.createElement('a');
      a.href = imageData.value;
      a.download = `${new Date().getTime()}.bmp`;
      a.click();
	// canvasToBlob(imageData.value, function (blob) {
    //       const url = URL.createObjectURL(blob);
    //       const a = document.createElement('a');
    //       a.href = url;
    //       a.download = 'image.bmp';
    //       a.click();
    //       URL.revokeObjectURL(url);
    //     }, 'image/bmp')
};
const onRead=(file)=> {
      console.log(file)
    }
</script>
<style lang="scss" scoped>
#box{
	width: 296px;
	height: 128px;
}
.picshow{
	width: 300px;
	height: auto;
}
.type {
	width: 296px;
	height: 128px;
	display: flex;
	border: 1px solid #3333;
	align-items: center;
	.all{
		width: 296px;
		height: 128px;
	}
	.left {
		width: 100px;
		height: 100px;
		margin-left:15px;
	}
	.right{
		margin-left: 20px;
		.t1{
			font-size: 30px;
			font-weight: bold;
		}
		.t2{
			font-size: 20px;
			font-weight: bold;
			color: #666666;
			margin-top:20px;
		}
	}
}
</style>